<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>CSS3练习</title>
<style>
.wrap {
    width: 500px;
    height: 300px;
    margin: 30px auto;
    position: relative;
    background: url(images/bg-grid.jpg) no-repeat center center;
    background-size: 100% 100%;
}
/*设置动画*/
@keyframes spin{
    0%{
        -webkit-transform:rotateY(0deg)
    }
    100%{
        -webkit-transform:rotateY(360deg)
    }
}
.spin {
    width: 142px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -72px;
    margin-top: -101px;
    border: 1px dashed orange;
    cursor: pointer;
     transform-style: preserve-3d; 
}
/*调用动画*/
.spin:hover{
    -webkit-animation:spin 5s linear infinite;
}
.rotate {
    background: url(images/cardKingClub.png) no-repeat center;
    background-size: 100% 100%;
    border: 15px solid hsla(50,50%,50%,.9);
    -webkit-transform: perspective(200px) rotateY(45deg);  
}
.rotate img{
    border: 1px solid green;
    -webkit-transform: rotateX(15deg) translateZ(60px);
    -webkit-transform-origin: 0 0 40px;
}
/*改变transform-style的默认值*/
.three-d {
   transform-style: preserve-3d; 
  /*  transform-style: flat;  */
}
</style>
</head>
<body>
<div class="wrap">
    <div class="spin">
        <div class="rotate">
            <img src="ui/images/p_big1.jpg" alt="" width="142" height="200" />
        </div>
    </div>
</div>
<div class="wrap">
    <div class="spin">
        <div class="rotate three-d">
            <img src="ui/images/p_big2.jpg" alt="" width="142" height="200" />
        </div>
    </div>
</div>
</body>
</html>